import { useMemo } from "react";
import { DebouncedInput } from "../elements/debouncedInput";
import { type Column, type Table } from "@tanstack/react-table";
import { type MemberEntity } from "~/types/local/member";

export const TableFilter = ({
	column,
	table,
}: {
	column: Column<MemberEntity, unknown>;
	table: Table<MemberEntity>;
}) => {
	const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);

	const columnFilterValue = column.getFilterValue();

	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
	const sortedUniqueValues = useMemo(
		() =>
			typeof firstValue === "number"
				? []
				: (Array.from(column.getFacetedUniqueValues().keys()).sort() as string[]),
		[column.getFacetedUniqueValues()],
	);

	return typeof firstValue === "number" ? (
		<div>
			<div className="flex space-x-2">
				<DebouncedInput
					type="number"
					min={Number(column.getFacetedMinMaxValues()?.[0] ?? "")}
					max={Number(column.getFacetedMinMaxValues()?.[1] ?? "")}
					value={(columnFilterValue as [number, number])?.[0] ?? ""}
					onChange={(value) =>
						column.setFilterValue((old: [number, number]) => [value, old?.[1]])
					}
					placeholder={`Min ${
						column.getFacetedMinMaxValues()?.[0]
							? `(${column.getFacetedMinMaxValues()?.[0]})`
							: ""
					}`}
					className="w-24 rounded border shadow"
				/>
				<DebouncedInput
					type="number"
					min={Number(column.getFacetedMinMaxValues()?.[0] ?? "")}
					max={Number(column.getFacetedMinMaxValues()?.[1] ?? "")}
					value={(columnFilterValue as [number, number])?.[1] ?? ""}
					onChange={(value) =>
						column.setFilterValue((old: [number, number]) => [old?.[0], value])
					}
					placeholder={`Max ${
						column.getFacetedMinMaxValues()?.[1]
							? `(${column.getFacetedMinMaxValues()?.[1]})`
							: ""
					}`}
					className="w-24 rounded border shadow"
				/>
			</div>
			<div className="h-1" />
		</div>
	) : (
		<>
			<datalist id={`${column.id}list`}>
				{sortedUniqueValues.slice(0, 5000).map((value: string) => (
					<option value={value} key={value} />
				))}
			</datalist>
			<DebouncedInput
				type="text"
				value={(columnFilterValue ?? "") as string}
				onChange={(value) => column.setFilterValue(value)}
				placeholder={`Search... (${column.getFacetedUniqueValues().size})`}
				className="w-36 rounded border shadow"
				list={`${column.id}list`}
			/>
			<div className="h-1" />
		</>
	);
};
